<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>电池管理</title>
    <link rel="shortcut icon" href="./favicon.ico" />
    <link rel="stylesheet" href="dist/styles/iview.css">
    <style>
        html,
        body,
        #app {
            width: 100%;
            height: 100%;
        }
        
        ;
        [v-cloak] {
            display: none;
        }
        
        .width-100 {
            width: 100%;
        }
        
        table.default-table {
            /* -moz-border-radius: 5px;
            -webkit-border-radius:5px;
            border-radius:5px; */
            width: 100%;
            border: solid #333;
            border-width: 1px 0px 0px 1px;
            font-size: #333;
            border-collapse: collapse;
            border-spacing: 0;
        }
        
        table.default-table tbody tr {
            height: 20px;
            line-height: 20px;
        }
        
        table.default-table tbody tr.odd {
            background-color: #fff;
        }
        
        table.default-table tbody tr.even {
            background-color: #F5F5F5;
        }
        
        table.default-table tbody tr:hover {
            background-color: #eee;
        }
        
        table.default-table tbody tr th,
        table.default-table tbody tr td,
        table.default-table thead th {
            padding: 3px 5px;
            text-align: left;
            /* border: 1px solid #ddd; */
            border: solid #333;
            border-width: 0px 1px 1px 0px;
            text-align: center;
            width: 33.333%;
        }
        
        table.default-table tbody tr th {
            font-weight: bold;
            text-align: center;
        }
        
        table.default-table tbody tr td.tac {
            text-align: center;
        }
        
        table.default-table tbody tr td a:hover {
            color: #0080c0;
        }
    </style>
</head>

<body>
    <div id='app'>
        <Layout style="height:100%;">
            <i-Header>
                <Row>
                    <i-Col span="15">
                        <h2 style="color:#fff;">电池参数 &nbsp;&nbsp;更新时间:{{updatetimeStr}}</h2>
                    </i-Col>
                    <i-Col span="5" offset="4">
                        <Button-Group shape="circle">
                            <i-button type="primary" @click="readInfo">Read</i-button>
                            <i-button type="success">LoopRead</i-button>
                            <i-button type="error">StopRead</i-button>
                        </Button-Group>
                    </i-Col>
                </Row>
            </i-Header>
            <i-Content>
                <Row>
                    <i-Col span="12" style="padding:10px;">
                        <Card>
                            <table class="default-table" v-cloak>
                                <thead>
                                    <th>Name</th>
                                    <th>Value</th>
                                    <th>Unit</th>
                                </thead>
                                <tbody>
                                    <tr v-for="item in batteryInfo1" :key="item.name">
                                        <td>{{item.name}}</td>
                                        <td>{{item.value}}</td>
                                        <td>{{item.unit}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </Card>
                    </i-Col>
                    <i-Col span="12" style="padding:10px;">
                        <Card>
                            <table class="default-table" v-cloak>
                                <thead>
                                    <th>Name</th>
                                    <th>Value</th>
                                    <th>Unit</th>
                                </thead>
                                <tbody>
                                    <tr v-for="item in batteryInfo2" :key="item.name">
                                        <td>{{item.name}}</td>
                                        <td>{{item.value}}</td>
                                        <td>{{item.unit}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </Card>
                    </i-Col>
                </Row>
            </i-Content>
        </Layout>
    </div>

    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="./js/gps51-jquery.js"></script>
    <script src="./js/js.cookie.min.js"></script>
    <script src="./js/dateformat.js"></script>
    <script src="./js/config.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="./js/util.js"></script>
    <script>
        var token = utils.getParameterByName('token');
        if (token == undefined) {
            window.location.href = "index.html";
        };
    </script>

    <script>
        var timeDifference = DateFormat.getOffset();
        new Vue({
            el: '#app',
            data: {
                updatetimeStr: '',
                batteryInfo1: [{
                    name: 'vcell1',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell2',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell3',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell4',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell5',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell6',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell7',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell8',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell9',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell10',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell11',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell12',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell13',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell14',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell15',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell16',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell17',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell18',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell19',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell20',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell21',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell22',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell23',
                    value: '',
                    unit: 'MV'
                }, {
                    name: 'vcell24',
                    value: '',
                    unit: 'MV'
                }, ],
                batteryInfo2: [{
                        name: 'voltagePack',
                        value: '',
                        unit: 'MV'
                    }, {
                        name: 'currentMa',
                        value: '',
                        unit: 'MA'
                    }, {
                        name: 'temperature1',
                        value: '',
                        unit: '℃'
                    }, {
                        name: 'relativeStateOfCharge',
                        value: '',
                        unit: '%'
                    }, {
                        name: 'remainingCapacityMah',
                        value: '',
                        unit: 'Mah'
                    }, {
                        name: 'fullChargeMah',
                        value: '',
                        unit: 'Mv'
                    }, {
                        name: 'designCapacityMah',
                        value: '',
                        unit: 'Mah'
                    }, {
                        name: 'designVoltageMv',
                        value: '',
                        unit: 'Mv'
                    }, {
                        name: 'fullChargeVoltageMv',
                        value: '',
                        unit: 'Mv'
                    }, {
                        name: 'chargingCurrentMa',
                        value: '',
                        unit: 'Ma'
                    }, {
                        name: 'cycleCount',
                        value: '',
                        unit: 'DEC'
                    }, {
                        name: 'serialNumber',
                        value: '',
                        unit: 'DEC'
                    }, {
                        name: 'manufactureDate',
                        value: '',
                        unit: 'Ymd'
                    }, {
                        name: 'manufacturerName',
                        value: '',
                        unit: ''
                    }, {
                        name: 'deviceName',
                        value: '',
                        unit: ''
                    }, {
                        name: 'deviceChemistry',
                        value: '',
                        unit: ''
                    },
                    // {name:'chargestatus',value:'',unit:'Mah'},
                    // {name:'dischargestatus',value:'',unit:'Mah'},
                    // {name:'chargewarning',value:'',unit:'Mah'},
                    // {name:'dischargewarning',value:'',unit:'Mah'},
                    // {name:'year',value:'',unit:''},
                    // {name:'month',value:'',unit:''},
                    // {name:'day',value:'',unit:''},
                ],
            },
            methods: {
                readInfo: function() {
                    this.queryBmsInfo();
                },
                queryBmsInfo: function() {
                    var url = myUrls.queryBmsInfo(),
                        me = this;
                    utils.sendAjax(url, {
                        deviceid: this.deviceid
                    }, function(resp) {
                        console.log('resp', resp);
                        if (resp.status === 0) {
                            if (resp.bms) {
                                resp.bms.manufacturedate = resp.bms.year + '-' + resp.bms.month + '-' + resp.bms.day;
                                me.setValue(resp.bms);
                            } else {

                            }
                        };
                    })
                },
                setValue: function(bms) {
                    var batteryInfo1 = this.batteryInfo1;
                    var batteryInfo2 = this.batteryInfo2;
                    var newBatteryInfo1 = [];
                    var newBatteryInfo2 = [];

                    batteryInfo1.forEach(function(item, index) {
                        var key = item.name.toLowerCase();
                        item.value = bms[key];
                        newBatteryInfo1.push(item);
                    })
                    batteryInfo2.forEach(function(item, index) {
                        var key = item.name.toLowerCase();
                        item.value = bms[key];
                        newBatteryInfo2.push(item);
                    })
                    this.batteryInfo1 = newBatteryInfo1;
                    this.batteryInfo2 = newBatteryInfo2;
                    this.updatetimeStr = DateFormat.longToLocalDateTimeStr(bms.updatetime);
                }
            },
            mounted: function() {
                this.deviceid = utils.getParameterByName('deviceid');
                this.queryBmsInfo();
            }
        })
    </script>
</body>

</html>